<template>
 <!-- 排序 -->
  <div class="hot-sort-wrapper">
    <p>排序 :</p>
    <ul>
      <li :class="sortIndex === item.id ? 'active' :''" v-for="item in sortList" :key="item.id" @click="sortHandler(item.id)">{{item.title}}</li>
      <li class="sort-arrow" v-show="sortIndex === 3 ">
        <i class="iconfont iconxiala-copy" :class="isDesc==='desc' ? 'arrow-active' :''"></i>
        <i class="iconfont iconxiala-copy" :class="isDesc ==='asc' ? 'arrow-active' :''"></i>
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  props:{
    // 分类
    sortList:{
      type:Array,
      // 阻止变量污染
      default:()=>{
        return []
      }
    },
  },
  data () {
    return {
      //控制排序索引状态切换标签
      sortIndex:0,
      //排序状态
      sortFlag:false,
      //排序 desc 降序  asc 升序
      isDesc:'desc'
    }
  },
  methods:{
    //控制排序状态切换
    sortHandler(id){
      console.log('id',id)
      this.sortIndex = id;
      let params = {
        id:id,
        isDesc:this.isDesc,
      }
      this.$emit("sendSortHandler",params)
      if(this.sortIndex === 3){
        // if(this.isDesc ==='desc'){
        //   this.isDesc = 'asc'
        //   console.log("价格从低到高")
        // }else{
        //  this.isDesc ='desc'
        //  console.log("价格从高到底")
        // }
        this.isDesc === "desc" ? this.isDesc = 'asc' : this.isDesc ='desc'
        this.$emit("sendSortHandler",params)
        // this.sortFlag ? console.log("价格从低到高") : console.log("价格从高到低");
      }
    },
  },
  mounted(){

  },

}
</script>

<style scoped>
  /* 排序 */
  .hot-sort-wrapper{
    display:flex;
    align-items: center;
    height: 50px;
    line-height: 50px;
    background-color: #383a43;
    width: 1440px;
    margin: 20px auto 0 auto;
    padding:0 28px;
    box-sizing:border-box;
    color:#666666;
  }
  @media screen and (max-width:1440px){
    .hot-sort-wrapper{
      width:1200px;
    }
  }
  .hot-sort-wrapper p{
    width: 46px;
    white-space:nowrap;
  }
  .hot-sort-wrapper ul{
    display:flex;
  }
  .hot-sort-wrapper ul .active{
    color:#ffffff;
    font-weight:500;
  }
  .hot-sort-wrapper ul li{
    margin:0 26px;
    height: 50px;
    line-height: 50px;
    user-select:none;
    cursor:pointer;
    transition: all .2s ease;
  }
  .hot-sort-wrapper ul li:hover{
    color:#ffffff;
  }
  .hot-sort-wrapper ul li:nth-child(3){
    margin-right:5px;
  }
  .hot-sort-wrapper ul li.sort-arrow{
    display: flex;
    margin: 0;
    flex-direction: column;
    height: 9px;
    line-height: 9px;
    margin-top: 16px;
  }
  .hot-sort-wrapper ul li.sort-arrow i{
    font-size: 20px;
  }
  .sort-arrow i:nth-child(1){
    transform: rotate(-180deg);
  }
  .sort-arrow .arrow-active{
    color:#ffffff;
  }
</style>
